<template>
  <div class="todo-info">
    <span class="total">{{total}} item left</span>
    <div class="tabs">
      <a v-for="(item,index) in states" :key="index" v-text="item" :class="['btn','primary',state==item?'actived':'']"
        @click="toggleState(item)"></a>
    </div>
    <button class="info btn" @click="cc">Clear Completed</button>
  </div>
</template>

<script>
export default {
  name: 'todoInfo',
  data () {
    return {
      states: ['all', 'actived', 'completed'],
      state: 'all'
    }
  },
  props: { total: Number },
  methods: {
    toggleState (state) {
      this.state = state
      this.$emit('handleState', state)
    },
    cc () {
      this.$emit('clearCompleted')
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '~styles/theme.styl';
@import '~styles/mixins.styl';

.todo-info {
  display: flex;
  justify-content: space-between;
  font-weight: 400;
  line-height: 30px;
  padding: 5px 10px;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  user-select: none;

  .total {
    color: $red;
  }

  .tabs {
    display: flex;
    justify-content: space-between;
    width: 250px;
  }
}

.btn.info {
  infoBtn();
}

.btn.primary {
  primaryBorderBtn();
}

.btn.primary.actived {
  primaryBtn();
}
</style>